import React, { ChangeEvent } from "react";

interface InputBoxProps{
    handleSubmitMessage: () => void;
    handleChangeMessage: (e: ChangeEvent<HTMLInputElement>) => void;
    message: string;
    handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void;
};

function InputBox(props: InputBoxProps) {

    const { handleSubmitMessage, handleChangeMessage, message, handleFileChange } = props;
    return (
        <div className="row">
            <div className="col-12 input-group mb-3">
                <div className="input-group-prepend">
                    <input onChange={handleFileChange} className="d-none" type="file" id="ipt-pic" accept=".png, .jpg, .jpeg" />
                    <label className="btn btn-left btn-outline-secondary" htmlFor="ipt-pic">
                        <i className="iconfont picture">&#xe71b;</i>
                    </label>
                </div>
                <input 
                    onChange={handleChangeMessage}
                    onKeyDown={(ev) => { ev.keyCode === 13 ? handleSubmitMessage() : void 0 }}
                    type="text" className="form-control" placeholder="输入消息内容"
                    aria-label="" aria-describedby="basic-addon1"
                    value={message}
                />
                <div className="input-group-append">
                    <label onClick={handleSubmitMessage} className="btn btn-info">提交</label>
                </div>
            </div>
        </div>
    );
}

export default InputBox;